<!DOCTYPE html> 
<html> 
<head> 
	<title>홍성준 - Hong-Sung-Jun - jQuery Mobile Snippets</title> 
	
	<meta name="author" content="Ste Brennan - Code Computerlove - http://www.codecomputerlove.com/" />
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<meta name="apple-mobile-web-app-capable" content="yes" />
	
	<link rel="stylesheet"  href="themes/css/jquery.mobile-1.3.0-beta.1.min.css" />
	<link rel="stylesheet"  href="themes/css/main.css" />
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
	<link href="themes/css/jquery-mobile.css" type="text/css" rel="stylesheet" />
	<link href="themes/css/photoswipe.css" type="text/css" rel="stylesheet" />
	<link href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" rel="stylesheet" />
	
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script type="text/javascript" src="lib/klass.min.js"></script>
	<script src="js/jquery-1.8.2.min.js"></script>
	<script type="text/javascript" src="js/code.photoswipe.jquery-3.0.5.min.js"></script>
	<script src="js/jquery.mobile-1.3.0-beta.1.min.js"></script>
	
	<script type="text/javascript">	
		$(document).ready(function(){
				var pageid = $.mobile.activePage.attr("id");
				pagenum = parseInt(pageid.charAt(4)) + 1;
				nextpagenum = pageid.substring(0,4)+pagenum;
				// Swipe Left
				$('#'+pageid).bind('swipeleft',function(event){
					$.mobile.changePage('#'+nextpagenum,"slide","reverse")
					$('#eventlog').append('swipeLeft')+parsingDate(new Date())+'<br/>'.css("color","red")
				});
		});

	    $(function() {
	        $("section[data-role*='page']").live('pageshow', function(event, ui) {
					var pageid = $.mobile.activePage.attr("id");
					pagenum = parseInt(pageid.charAt(4));
					var prevpage = pageid.substring(0,4) + (pagenum-1);
					var nextpage = pageid.substring(0,4) + (pagenum+1);
					
					// Swipe Right
					$('#'+pageid).bind('swiperight',function(event){
						$.mobile.changePage('#'+prevpage,"slide","reverse")
					});
					// Swipe Left
					$('#'+pageid).bind('swipeleft',function(event){
						$.mobile.changePage('#'+nextpage,"slide","reverse")
					});
				});
	    });
	    
	    /*
		 * IMPORTANT!!!
		 * REMEMBER TO ADD  rel="external"  to your anchor tags. 
		 * If you don't this will mess with how jQuery Mobile works
		 */
		
		 (function(window, PhotoSwipe){

	            document.addEventListener('DOMContentLoaded', function(){

	                var
	                    options = {},
	                    instance = PhotoSwipe.attach( $('.Gallery1 a'), options );
// 	                document.querySelectorAll('#Gallery1 a')
	            }, false);


	        }(window, window.Code.PhotoSwipe));
	</script>

</head> 

<body> 
	<section id = "page1" data-role="page" data-fullscreen="true">>
			<!-- defaultpanel  -->
		<div data-role="panel" id="mypanel" data-theme="a" data-position="left" data-display="push" data-dismissible="false">
			<div data-role="content">
				<ul>
					<li><a href="#index" data-rel="close" class="btn-setting"><span class="sprite"></span><span class="txt">설정</span></a></li>
					<li><a href="#index"  class="btn-map"><span class="sprite"></span><span class="txt">지도</span></a></li>
					<li><a href="mypeople.html"  class="btn-menupeople"><span class="sprite"></span><span class="txt">내정보</span></a></li>
					<li><a href="friends.html"  class="btn-friends"><span class="sprite"></span><span class="txt">친구</span></a></li>
					<li><a href="#index"  class="btn-calendar"><span class="sprite"></span><span class="txt">일정</span></a></li>
				</ul>
			</div>
		</div><!-- /mypanel -->
		
		
		<div data-role="header" data-position="fixed"></div>
		<!-- content -->
		<div data-role="content">
			<ul data-role="listview" data-inset="true" data-filter="true" 
				data-filter-placeholder="맛집명">
									 <!--search -->
				<li><a href="review.html">
					<img class="img_photo" src="themes/css/images/don.png"/>
					<p class="ui-li-aside"><strong>4:50</strong>PM</p>
					<h3><strong>돈까스카레</strong></h3>
					<p>카레다카레</p>
					<span class="ui-li-count"> 좋탕 57</span></a>
					
				<div data-role="controlgroup" data-type="horizontal" data-mini="true">
					<a href="index.html" data-role="button" data-icon="edit">댓글</a>
					<a href="index.html" data-role="button" data-icon="star">좋탕</a>
					<a href="index.html" data-role="button" data-icon="check">같이</a>
				</div></li>
				
				<li><a href="#">
					<img class="img_photo" src="themes/css/images/mr.chow.JPG" />
					<p class="ui-li-aside"><strong>4:48</strong>PM</p>
					<h3><strong>미스터차우</strong></h3>
					<p>미스터차우 맛있어효</p>
					<span class="ui-li-count"> 좋탕 11</span>
					</a>
				<div data-role="controlgroup" data-type="horizontal" data-mini="true">
					<a href="index.html" data-role="button" data-icon="edit">댓글</a>
					<a href="index.html" data-role="button" data-icon="star">좋탕</a> 
					<a href="index.html" data-role="button" data-icon="check">같이</a>
				</div></li>
				
				<li><a href="#">
					<img class="img_photo" src="themes/css/images/goo.jpg" />
					<p class="ui-li-aside"><strong>4:44</strong>PM</p>
					<h3><strong>곱창이당</strong></h3>
					<p>곱창맛있는곱창</p>
					<p>비싼곱창ㅠㅠ</p>
					<span class="ui-li-count"> 좋탕 22</span>
					</a>
				<div data-role="controlgroup" data-type="horizontal" data-mini="true">
					<a href="index.html" data-role="button" data-icon="edit">댓글</a>
					<a href="index.html" data-role="button" data-icon="star">좋탕</a> 
					<a href="index.html" data-role="button" data-icon="check">같이</a>
				</div></li>
				
				<li><a href="#">
					<img class="img_photo" src="themes/css/images/hoho.jpg" />
					<p class="ui-li-aside"><strong>3:48</strong>PM</p>
					<h3><strong>호호호호떡</strong></h3>
					<p>호호호~~호호호~~떡</p>
					<span class="ui-li-count"> 좋탕 33</span>
					</a>
				<div data-role="controlgroup" data-type="horizontal" data-mini="true">
					<a href="index.html" data-role="button" data-icon="edit">댓글</a>
					<a href="index.html" data-role="button" data-icon="star">좋탕</a> 
					<a href="index.html" data-role="button" data-icon="check">같이</a>
				</div></li>

				<li><a href="#">
					<img class="img_photo" src="themes/css/images/salad.jpg" />
					<p class="ui-li-aside"><strong>2:48</strong>PM</p>
					<h3><strong>샐러드</strong></h3>
					<p>소스가...</p>
					<span class="ui-li-count"> 좋탕 49</span>
					</a>
				<div data-role="controlgroup" data-type="horizontal" data-mini="true">
					<a href="index.html" data-role="button" data-icon="edit">댓글</a>
					<a href="index.html" data-role="button" data-icon="star">좋탕</a> 
					<a href="index.html" data-role="button" data-icon="check">같이</a>
				</div></li>
				</ul>
			</div>
		<!--/content end-->
		
		
		<div data-role="footer" data-theme="a"  data-position="fixed">
			<a href="#mypanel" data-role="button" data-icon="bars">메뉴</a>
			<a href="write.html" data-role="button" class="ui-btn-right" data-iconpos="right" data-icon="edit" >글쓰기</a>
		</div>
	</section>

	<section data-role="page" id="page2" class="Gallery1">
		<div data-role="header" data-position="fixed" >
				<h1>My Gallery</h1>
			</div>
			<div data-role="content">	
				<ul class="gallery">
				
					<li><a href="themes/css/images/full/001.jpg" rel="external"><img src="themes/css/images/thumb/001.jpg" alt="Image 001" /></a></li>
					<li><a href="themes/css/images/full/002.jpg" rel="external"><img src="themes/css/images/thumb/002.png" alt="Image 002" /></a></li>
					<li><a href="themes/css/images/full/003.jpg" rel="external"><img src="themes/css/images/thumb/003.png" alt="Image 003" /></a></li>
					<li><a href="themes/css/images/full/004.jpg" rel="external"><img src="themes/css/images/thumb/004.png" alt="Image 004" /></a></li>
					<li><a href="themes/css/images/full/005.jpg" rel="external"><img src="themes/css/images/thumb/005.png" alt="Image 005" /></a></li>
					<li><a href="themes/css/images/full/006.jpg" rel="external"><img src="themes/css/images/thumb/006.png" alt="Image 006" /></a></li>
					<li><a href="themes/css/images/full/007.jpg" rel="external"><img src="themes/css/images/thumb/007.png" alt="Image 007" /></a></li>
					<li><a href="themes/css/images/full/008.jpg" rel="external"><img src="themes/css/images/thumb/008.png" alt="Image 008" /></a></li>
					<li><a href="themes/css/images/full/009.jpg" rel="external"><img src="themes/css/images/thumb/009.png" alt="Image 009" /></a></li>
				</ul>
			</div>
			<div data-role="footer" data-position="fixed" >
				<h1>우리들의 맛집</h1>
			</div>
	</section>


</body>
</html>

